<!-- 采购订单 -->
<template>
  <div class="purchaseOrder">
    <div class="purchaseOrder_content">
      <div class="purchaseOrder_content_left">
        <lineBarChart ref="purchaseLineChart" id="purchaseLineChart" width="100%" height="35%"></lineBarChart>
        <tableBox class="purchaseTable" :data="purchaseTableData" :show-serial-number="false" :showThead="false" />
      </div>
      <div class="purchaseOrder_content_right">
        <pieChart id="purchaseNumPieChart" ref="purchaseNumPieChart" height="30%" width="100%"></pieChart>
        <pieChart id="purchaseMoneyPieChart" ref="purchaseMoneyPieChart" height="30%" width="100%"></pieChart>
        <tableBox :data="orderStatusTableData" :show-serial-number="false" :showThead="false" />
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"

import lineBarChart from "../components/lineBarChart.vue"
import { getProcureOrderByDayImg, getSupplierProjectOrderStatusInfoTable, getCommodityTypeProduceNumberRate, getCommodityTypeProduceMoneyRate, getSupplierCommodityTypeProjectOrderStatusInfoTable } from "@/api/bi/assetsAndMaterials";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      load: null,
      purchaseTableData: [],
      orderStatusTableData: []
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getLineChartData()
    this.getOrderStatusList()
    this.getSupplierOrderList()
    this.getPurchaseQuantityCharts()
    this.getPurchaseMoneyCharts()
  },
  methods: {
    // 获取日采购订单组合图数据
    async getLineChartData() {
      const { data: res } = await getProcureOrderByDayImg();

      let xAxisData = []
      let legendData = { show: true, data: ['订单总数', '未完成', '已完成'] }
      let seriesData = []
      let title = {
        text: '日采购订单数组合图',
        left: 'center'
      }
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      legendData.data.forEach((item, index) => {

        let type = { type: 'line' }
        if (index > 0) {
          type = {
            type: 'bar',
          }
        }
        seriesData.push(
          {
            name: legendData.data[index],
            ...type,
            data: res.dataVal[index],
          },
        )
      })
      this.$refs.purchaseLineChart.initChart(legendData, xAxisData, seriesData, title)
    },
    async getSupplierOrderList() {
      const { data: res } = await getSupplierProjectOrderStatusInfoTable();
      let style = "background: #EEEFF3;border-right:1px solid #fff"

      let head = [
        [{ val: '供应商', style }, { val: '供方类型', style }, { val: '订单总金额', style }, { val: '订单总数', style }, { val: '已完成订单金额', style }, { val: '已完成订单数', style }, { val: '未完成订单金额', style }, { val: '未完成订单数', style }, { val: '已交付订单数', style }, { val: '未交付订单数', style },]
      ]
      this.purchaseTableData = [

      ]
      let arr = []
      res.forEach(item => {
        arr.push([{ val: item.supplierName }, { val: item.supplierType }, { val: item.sumMoney }, { val: item.sumNumber }, { val: item.successMoney }, { val: item.successNumber }, { val: item.unSuccessMoney }, { val: item.unSuccessNumber }, { val: item.deliverNumber }, { val: item.unDeliverNumber }])
      })

      this.purchaseTableData = [
        ...head,
        ...arr
      ]
    },
    // 获取采购数量
    async getPurchaseQuantityCharts() {
      const { data: res } = await getCommodityTypeProduceNumberRate()
      let chartData = []
      res.forEach(item => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }

      let title = {
        text: '采购数量',
        left: 'center',
        top: '45%'
      }
      this.$refs.purchaseNumPieChart.initChart(chartData, legend, title)
    },
    // 获取采购金额
    async getPurchaseMoneyCharts() {
      const { data: res } = await getCommodityTypeProduceMoneyRate()
      let chartData = []
      res.forEach(item => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      let legend = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }

      let title = {
        text: '采购金额',
        left: 'center',
        top: '45%'
      }
      this.$refs.purchaseMoneyPieChart.initChart(chartData, legend, title)
      this.load.close()
    },

    async getOrderStatusList() {
      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff"

      let head = [
        [{ val: '类型', rowspan: 2, style }, { val: '已完成订单采购', colspan: 2, style }, { val: '未完成订单采购', colspan: 2, style }],
        [{ val: '采购数量', style: styleT }, { val: '采购金额', style: styleT }, { val: '采购数量', style: styleT }, { val: '采购金额', style: styleT }]
      ]

      const { data: res } = await getSupplierCommodityTypeProjectOrderStatusInfoTable()
      let arr = []
      res.forEach(item => {
        arr.push([{ val: item.commodityTypeName }, { val: item.successNumber }, { val: item.successMoney }, { val: item.unSuccessNumber }, { val: item.unSuccessMoney }])
      })
      this.orderStatusTableData = [
        ...head,
        ...arr
      ]
    },
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
  }

}
</script>
<style lang="scss" scoped>
.purchaseOrder {
  background: #F2F4FC;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .purchaseOrder_content {
    flex-grow: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .purchaseOrder_content_left {
      background-color: rgba(255, 255, 255, 0.6);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 6px;
      padding: 22px;
      box-sizing: border-box;
      width: 75%;
      flex-shrink: 0;
      height: 100%;

      .purchaseTable {
        height: 60%;
        margin-top: 20px;
        flex-grow: 1;
      }
    }

    .purchaseOrder_content_right {
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      padding: 22px;
      width: 20%;
      margin-left: 20px;
      flex-grow: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

  }
}
</style>
